<script setup>
	// import {
	// 	onMounted,
	// 	ref
	// } from 'vue'
	import {
		listApi,
		readAllApi
	} from '@/apis/message.js'

	import {
		useList
	} from '@/hooks/index.js'

	const {
		list,
		hasMore,
		goBottom,
		isTriggered,
		refresh
	} = useList(listApi, 201)

	// // == 数据查询渲染 ==
	// // 1. 任务通知变量
	// const list = ref([])
	// // 是否还有更多数据：true 还有数据 ｜ false  没有数据了
	// const hasMore = ref(true)
	// // 2.  获取任务列表数据
	// // 分页请求的参数
	// const params = {
	// 	page: 1, // 页码
	// 	pageSize: 10, // 每页条数
	// }
	// const getList = async () => {
	// 	const {
	// 		data
	// 	} = await listApi(201, params.page, params.pageSize)
	// 	console.log('任务列表：', data);
	// 	//  说明：后续要实现上拉加载更多（ 分页），不能=号赋值=》应该追加
	// 	// list.value = data.items
	// 	list.value.push(...data.items)

	// 	// 判断是否有更多数据
	// 	if (parseInt(data.counts) === list.value.length) {
	// 		//  没有更多数据了
	// 		hasMore.value = false
	// 	}

	// }
	// // onMounted(() => {
	// // 	console.log('任务通知挂载了');
	// getList()
	// // })

	// /**
	//  * == 上拉分页实现：==
	//  * 1. 判断是否滚动到列表的底部(关键点)
	//  * 2. 到底部=》
	//  *    2.1 判断有更多数据=》页码+1=>请求下一页数据
	//  *    2.2 判断没有更多数据=》变量hasMore=》修改为 false
	//  */
	// const goBottom = () => {
	// 	// console.log('到底部了');
	// 	if (hasMore.value === false) return
	// 	params.page++
	// 	getList()
	// }

	// // ==  下拉刷新 == 
	// // 控制下拉刷新loading效果的显示和隐藏:true显示 ｜ false 关闭
	// const isTriggered = ref(false)
	// const refresh = async () => {
	// 	isTriggered.value = true
	// 	console.log('开始刷新');
	// 	/**
	// 	 * 下拉刷新步骤：重新获取最新的任务列表数据（核心）
	// 	 * 1. 重置操作？
	// 	 *   1.1 页码重置为 1
	// 	 *   1.2 列表数据重置为[]空数组
	// 	 *   1.3 hasMore 重置为 true
	// 	 * 		
	// 	 * 2. 重新发请求(刷新列表)
	// 	 */
	// 	params.page = 1
	// 	list.value = []
	// 	hasMore.value = true
	// 	await getList()
	// 	isTriggered.value = false
	// }


	// ==  所有消息已读 ==
	const readAll = async () => {
		/**
		 * 1. 发送请求
		 * 2. 重新获取列表数据或者现有 list 数据每条消息都改为已读
		 */
		await readAllApi(201)
		//  更新现有列表中数据的已读状态
		list.value.forEach(item => {
			item.isRead = 1
		})
	}
</script>
<template>
	<!-- 
	 1. 上拉分页：
	 @scrolltolower事件做触底检测
	 2. 下拉刷新：
	 refresher-enabled开启下拉刷新=> 只写属性名，默认传 true
	 @refresherrefresh刷新执行事件
	 refresher-triggered控制下拉刷新loading 显示隐藏
		
	 -->
	<scroll-view @refresherrefresh="refresh" :refresher-enabled="true" :refresher-triggered="isTriggered"
		@scrolltolower="goBottom" class="scroll-view" scroll-y>
		<view class="scroll-view-wrapper">
			<view @click="readAll" class="message-action">
				<text class="iconfont icon-clear"></text>
				全部已读
			</view>

			<uni-card v-for="notify in list" :key="notify.id" :border="false" :is-shadow="false">
				<!--  默认插槽，指定内容显示 -->
				<view class="brief">{{ notify.content }}</view>
				<view class="extra">
					<text class="time">{{ notify.created }}</text>
					<navigator hover-class="none" class="link" :url="`/subpkg_task/detail/index?id=${notify.id}`">查看详情</navigator>
				</view>
				<!--  具名插槽 title，指定 head 的内容 -->
				<template #title>
					<!-- 
					说明：unread小红点类名
					notify.isRead=0 追加unread类名 =》显示红点=》代表消息是未读
					notify.isRead=1  不追加unread类名
					 -->
					<view :class="{ unread: notify.isRead === 0 }" class="title">您有新的运输任务</view>
				</template>
			</uni-card>
			<view v-if="list.length === 0" class="message-blank">暂无消息</view>


		</view>

		<!--  没有更多数据提示 -->
		<view class="noMore" v-if="hasMore === false">
			没有更多数据了...
		</view>
	</scroll-view>
</template>

<style lang="scss" scoped>
	@import './styles.scss';
</style>